html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
img {
    border: none;
}
p {
    margin-bottom: 0;
}
body,
a,
input,
button {
    font-family: "Microsoft Yahei", "Droid Sans Fallback", "Arial", "Helvetica", "sans-serif", "宋体";
    font-size: 14px;
    outline: none;
    color: #666;
    text-decoration: none;
    margin: 0 auto;
}
body{
    font-family: "pfr";
    height: 100%;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
a {
    color: #428bca;
}
a:hover {
    text-decoration: none;
}
table {
    text-align: center;
    vertical-align: middle;
}
th {
    text-align: center;
    vertical-align: middle;
}
/*通用*/
.flt {
    float: left;
}
.frt {
    float: right;
}
.clr {
    clear: both;
}
.mt5 {
    margin-top: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mt5-i {
    margin-top: 5px ! important;
}
.mt10-i {
    margin-top: 10px ! important;
}
.mt15-i {
    margin-top: 15px ! important;
}
.mt20-i {
    margin-top: 20px ! important;
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb5-i {
    margin-bottom: 5px ! important;
}
.mb10-i {
    margin-bottom: 10px ! important;
}
.mb15-i {
    margin-bottom: 15px ! important;
}
.mb20-i {
    margin-bottom: 20px ! important;
}
.ml5 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}
.ml5-i {
    margin-left: 5px ! important;
}
.ml10-i {
    margin-left: 10px ! important;
}
.ml15-i {
    margin-left: 15px ! important;
}
.ml20-i {
    margin-left: 20px ! important;
}
.mr5 {
    margin-right: 5px;
}
.mr10 {
    margin-right: 10px;
}
.mr15 {
    margin-right: 15px;
}
.mr20 {
    margin-right: 20px;
}
.mr5-i {
    margin-right: 5px ! important;
}
.mr10-i {
    margin-right: 10px ! important;
}
.mr15-i {
    margin-right: 15px ! important;
}
.mr20-i {
    margin-right: 20px ! important;
}
.pt5 {
    padding-top: 5px;
}
.pt10 {
    padding-top: 10px;
}
.pt15 {
    padding-top: 15px;
}
.pt20 {
    padding-top: 20px;
}
.pt5-i {
    padding-top: 5px ! important;
}
.pt10-i {
    padding-top: 10px ! important;
}
.pt15-i {
    padding-top: 15px ! important;
}
.pt20-i {
    padding-top: 20px ! important;
}
.pb5 {
    padding-bottom: 5px;
}
.pb10 {
    padding-bottom: 10px;
}
.pb15 {
    padding-bottom: 15px;
}
.pb20 {
    padding-bottom: 20px;
}
.pb5-i {
    padding-bottom: 5px ! important;
}
.pb10-i {
    padding-bottom: 10px ! important;
}
.pb15-i {
    padding-bottom: 15px ! important;
}
.pb20-i {
    padding-bottom: 20px ! important;
}
.pr5 {
    padding-right: 5px;
}
.pr10 {
    padding-right: 10px;
}
.pr15 {
    padding-right: 15px;
}
.pr20 {
    padding-right: 20px;
}
.pr5-i {
    padding-right: 5px ! important;
}
.pr10-i {
    padding-right: 10px ! important;
}
.pr15-i {
    padding-right: 15px ! important;
}
.pr20-i {
    padding-right: 20px ! important;
}
.pl5 {
    padding-left: 5px;
}
.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}
.pl5-i {
    padding-left: 5px ! important;
}
.pl10-i {
    padding-left: 10px ! important;
}
.pl15-i {
    padding-left: 15px ! important;
}
.pl20-i {
    padding-left: 20px ! important;
}
.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.fz12 {
    font-size: 12px ! important;
}
.fz14 {
    font-size: 14px ! important;
}
.fz16 {
    font-size: 16px ! important;
}
.fz18 {
    font-size: 18px ! important;
}
.pre {
    position: relative ! important;
}
.c-w {
    color: #fff;
}
.c-b {
    color: #000;
}
.c-9 {
    color: #999;
}
.c-6 {
    color: #666;
}
.c-3 {
    color: #333;
}
.c-w-i {
    color: #fff ! important;
}
.c-b-i {
    color: #000 ! important;
}
.c-9-i {
    color: #999 ! important;
}
.c-6-i {
    color: #666 ! important;
}
.c-3-i {
    color: #333 ! important;
}
.t-c {
    text-align: center;
}
.t-c-i {
    text-align: center ! important;
}
.l-c {
    vertical-align: middle;
}
.l-c-i {
    vertical-align: middle ! important;
}
.bz-bb {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.bz-cb {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
.bc-w {
    background: #fff;
}
.bc-w-i {
    background: #fff ! important;
}
.fw-in {
    font-weight: inherit ! important;
}
.fw-b {
    font-weight: bold;
}
.cs-p {
    cursor: pointer ! important;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.w1000 {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.w1024 {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
.w900 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
//设置宽高
.wh(@w, @h) {
    width: @w;
    height: @h;
}
//定义margin值
.mt(@i) {
    margin-top: @i;
}
.ml(@i) {
    margin-left: @i;
}
.mr(@i) {
    margin-right: @i;
}
.mb(@i) {
    margin-bottom: @i;
}
.mc() {
    margin-left: auto;
    margin-right: auto;
}
//定义padding
.pt(@i) {
    padding-top: @i;
}
.pb(@i) {
    padding-bottom: @i;
}
.pl(@i) {
    padding-left: @i;
}
.pr(@i) {
    padding-right: @i;
}
//单行垂直居中
.hc(@i) {
    height: @i;
    line-height: @i;
}
//字体大小
.fz(@i){
    font-size: @i;
}
//定义三角形
.ltne(@height, @color) {
    //向左
    border-right: @height solid @color;
    border-top: @height solid transparent;
    border-bottom: @height solid transparent;
}
.rtne(@height, @color) {
    //向右
    border-left: @height solid @color;
    border-top: @height solid transparent;
    border-bottom: @height solid transparent;
}
.ttne(@height, @color) {
    //向上
    border-bottom: @height solid @color;
    border-left: @height solid transparent;
    border-right: @height solid transparent;
}
.btne(@height, @color) {
    //向下
    border-top: @height solid @color;
    border-left: @height solid transparent;
    border-right: @height solid transparent;
}
//定义等腰三角形,底边宽度可自定义
.ltne(@height, @width, @color) {
    border-right: @height solid @color;
    border-top: @width/2 solid transparent;
    border-bottom: @width/2 solid transparent;
}
.rtne(@height, @width, @color) {
    border-left: @height solid @color;
    border-top: @width/2 solid transparent;
    border-bottom: @width/2 solid transparent;
}
.ttne(@height, @width, @color) {
    border-bottom: @height solid @color;
    border-left: @width/2 solid transparent;
    border-right: @width/2 solid transparent;
}
.btne(@height, @width, @color) {
    border-top: @height solid @color;
    border-left: @width/2 solid transparent;
    border-right: @width/2 solid transparent;
}
//可自由定义三角形三边长度
.ltne(@height, @width1, @width2, @color) {
    border-right: @height solid @color;
    border-top: @width1 solid transparent;
    border-bottom: @width2 solid transparent;
}
.rtne(@height, @width1, @width2, @color) {
    border-left: @height solid @color;
    border-top: @width1 solid transparent;
    border-bottom: @width2 solid transparent;
}
.ttne(@height, @width1, @width2, @color) {
    border-bottom: @height solid @color;
    border-left: @width1 solid transparent;
    border-right: @width2 solid transparent;
}
.btne(@height, @width1, @width2, @color) {
    border-top: @height solid @color;
    border-left: @width1 solid transparent;
    border-right: @width2 solid transparent;
}
//定义按钮常规样式
.btn(@w, @h, @r:5px, @fz:14px) {
    display: block;
    .wh(@w,@h);
    font: @fz/@h "microsoft yahei";
    text-align: center;
    text-decoration: none;
    border-radius: @r;
}
.btn(@w, @h, @r:5px) {
    display: block;
    .wh(@w,@h);
    text-align: center;
    text-decoration: none;
    border-radius: @r;
}
.tm(@content) {
    transform: @content;
    -webkit-transform: @content;
    -o-transform: @content;
    -moz-transform: @content;
    -ms-transform: @content;
}
.blur(@s) {
    filter:blur(%(~"%apx",@s));
    -webkit-filter: blur(%(~"%apx",@s));
    -ms-filter: blur(%(~"%apx",@s));
    -moz-filter: blur(%(~"%apx",@s));
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=@s, MakeShadow=false);
}
//只有两个函数的情况,向底部渐变
.tlg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-linear-gradient(top, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, @cs 0%,@ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, @cs 0%,@ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr = %("%a",argb(@cs)), endColorstr = %("%a",argb(@ce)),GradientType=0);
}
.tlg(@cs, @cc1, @cc2, @ce...) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,43cff9+100 */
    background: extract(@arguments, 1);
    /* Old browsers */
    background: -moz-linear-gradient(top, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr= %("%a",argb(extract(@arguments, 1))), endColorstr= %("%a",argb(extract(@arguments, 7))),GradientType=0 );
    /* IE6-9 */
}
//向左边渐变
.llg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-linear-gradient(left, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, @cs 0%,@ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, @cs 0%,@ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr = %("%a",argb(@cs)), endColorstr = %("%a",argb(@ce)),GradientType=1);
}
.llg(@cs, @cc1, @cc2, @ce...) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,43cff9+100 */
    background: extract(@arguments, 1);
    /* Old browsers */
    background: -moz-linear-gradient(left, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, extract(@arguments, 1) extract(@arguments, 2),extract(@arguments, 3) extract(@arguments, 4),extract(@arguments, 5) extract(@arguments, 6),extract(@arguments, 7) extract(@arguments, 8));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr= %("%a",argb(extract(@arguments, 1))), endColorstr= %("%a",argb(extract(@arguments, 7))),GradientType=0 );
    /* IE6-9 */
}
//径向渐变
.rg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-radial-gradient(center,ellipse cover, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center,ellipse cover, @cs 0%,@ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, @cs 0%,@ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr = %("%a",argb(@cs)), endColorstr = %("%a",argb(@ce)),GradientType=1);
}
.ab() {
    content: "";
    display: block;
}
.clr() {
    &:after {
        .ab();
        clear: both;
    }
}
//body,html{
//  width: 100%;
//}
@media only screen and (min-width: 400px) {
  html {
    font-size: 21.33333333px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 22.08px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 25.6px !important;
  }
}
@font-face{
    font-family: "pfr";
    src: url("../fonts/PingFang Regular.ttf");
}
@font-face{
    font-family: "pfb";
    src: url("../fonts/PingFang Bold.ttf");
}
@bgColor:#28c81e;
@fontColor:#444;
@boderColor:#e2e2e2;
body{
    font-size: 0.85rem;
    font-family: 'pfr';
}
input {
    -webkit-appearance: none;
}
textarea {
    -webkit-appearance: none;
}
input:disabled {
    color: #666;
    opacity: 1;
    -webkit-text-fill-color: #666;
}
.re(@width) {
    @xs: 100px/(750px/@width);
    @media (max-width:(@width + 1px)) {
        html {
            font-size: @xs;
        } 
    }
    
    @media (min-width:(750px + 2px)) {
        html {
            font-size: 100px;
        }
    }   
}
.re(1600px);
.re(1440px);
.re(1280px);
.re(1024px);
.re(960px);
.re(950px);
.re(900px);
.re(800px);
.re(773px);
.re(768px);
.re(750px);
.re(745px);
.re(736px);
.re(732px);
.re(667px);
.re(640px);
.re(600px);
.re(568px);
.re(533px);
.re(435px);
.re(414px);
.re(411px);
.re(384px);
.re(375px);
.re(360px);
.re(320px);